<template>
  <div class="search-page">
    <div class="search-header" :style="{ backgroundImage: `url(${searchBg})` }">
      <div class="search-title">
        <h1>欢迎进入保利酒店旗下项目月度经营看板！</h1>
        <p>酒店详细数据和经营情况</p>
      </div>
      <div class="search-box">
        <div class="search-input">
          <SearchOutlined />
          <input type="text" placeholder="请输入关键词搜索" v-model="searchText" />
        </div>
        <div class="location-input">
          <EnvironmentOutlined />
          <input type="text" placeholder="中国，广东，广州" v-model="locationText" />
        </div>
        <a-button type="primary" class="search-btn">搜索</a-button>
      </div>
    </div>
    <div class="search-content">
      <div class="search-result-title">搜索结果</div>
      <div class="hotel-list">
        <div class="hotel-item" v-for="(item, index) in hotelList" :key="index">
          <div class="hotel-name">
            <ClockCircleOutlined />
            {{ item.name }}
          </div>
          <CloseOutlined class="close-icon" />
        </div>
      </div>
      <div class="show-all">
        <span>显示全部</span>
      </div>
      <div class="map-container">
        <!-- 这里可以集成地图组件 -->
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { SearchOutlined, EnvironmentOutlined, ClockCircleOutlined, CloseOutlined } from '@ant-design/icons-vue';
  import searchBg from '/@/assets/images/search_bg.jpg';

  export default defineComponent({
    name: 'SearchPage',
    components: {
      SearchOutlined,
      EnvironmentOutlined,
      ClockCircleOutlined,
      CloseOutlined,
    },
    setup() {
      const searchText = ref('');
      const locationText = ref('');
      const hotelList = ref([
        { name: '广州保利设计之都酒店' },
        { name: '广州保利悦雅酒店' },
        { name: '广州保利悦雅酒店' },
        { name: '广州保利悦雅酒店' },
      ]);

      return {
        searchText,
        locationText,
        hotelList,
        searchBg,
      };
    },
  });
</script>

<style lang="less" scoped>
  .search-page {
    min-height: 100%;
    background: #fff;

    .search-header {
      height: 300px;
      background-size: cover;
      background-position: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #fff;
      padding: 0 20px;

      .search-title {
        text-align: center;
        margin-bottom: 40px;

        h1 {
          font-size: 32px;
          color: #fff;
          margin-bottom: 16px;
        }

        p {
          font-size: 16px;
          opacity: 0.8;
        }
      }

      .search-box {
        display: flex;
        gap: 16px;
        width: 100%;
        max-width: 800px;

        .search-input, .location-input {
          flex: 1;
          background: #fff;
          border-radius: 4px;
          display: flex;
          align-items: center;
          padding: 0 16px;
          height: 48px;

          .anticon {
            color: #999;
            margin-right: 8px;
          }

          input {
            flex: 1;
            border: none;
            outline: none;
            font-size: 16px;

            &::placeholder {
              color: #999;
            }
          }
        }

        .search-btn {
          height: 48px;
          padding: 0 32px;
          font-size: 16px;
        }
      }
    }

    .search-content {
      padding: 24px;

      .search-result-title {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 16px;
      }

      .hotel-list {
        margin-bottom: 16px;

        .hotel-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 12px 16px;
          background: #f5f5f5;
          border-radius: 4px;
          margin-bottom: 8px;

          .hotel-name {
            display: flex;
            align-items: center;
            gap: 8px;

            .anticon {
              color: #666;
            }
          }

          .close-icon {
            cursor: pointer;
            color: #999;

            &:hover {
              color: #666;
            }
          }
        }
      }

      .show-all {
        text-align: center;
        color: #1890ff;
        cursor: pointer;
        margin-bottom: 24px;
      }

      .map-container {
        height: 400px;
        background: #f5f5f5;
        border-radius: 4px;
      }
    }
  }
</style> 